<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
// 搜索框双向绑定
const goSearch = ref("");
// 双选框数据绑定，默认按标签
const selectItem = ref("sign");
</script>
<template>
    <el-row class="row-bg" justify="space-between">
        <el-col :span="2">
            <router-link to="/">
                <el-link :underline="false" class="nav-topic">CNPixiv</el-link>
            </router-link>
        </el-col>
        <el-col :span="2" class="text-align-center">
            <router-link to="/"><el-link :underline="false" class="nav-left">新作</el-link></router-link>
        </el-col>
        <el-col :span="2" class="text-align-center">
            <router-link to="/">
                <el-link :underline="false" class="nav-left">榜单</el-link>
            </router-link>
        </el-col>
        <el-col :span="2" class="text-align-center">
            <router-link to="/">
                <el-link :underline="false" class="nav-left">特辑</el-link>
            </router-link>
        </el-col>
        <el-col :span="6">
            <el-input v-model="goSearch" type="search" placeholder="搜索插画" v-on:keyup.enter="" class="input-with-select">
                <template #prepend>
                    <el-select v-model="selectItem" placeholder="按标签" style="width: 100px">
                        <el-option label="按标签" value="sign" />
                        <el-option label="按画师" value="painter" />
                    </el-select>
                </template>
                <template #append>
                    <el-button :icon="Search" />
                </template>
            </el-input>
        </el-col>
        <el-col :span="2" class="text-align-end">
            <router-link to="/">
                <el-link :underline="false" class="nav-right">APP下载</el-link>
            </router-link>
        </el-col>
        <el-col :span="3" class="text-align-center">
            <router-link to="/">
                <el-link :underline="false" class="nav-right">微信小程序</el-link>
            </router-link>
        </el-col>
        <el-col :span="1" class="text-align-end">
            <router-link to="/">
                <el-link :underline="false" class="nav-right">交流</el-link>
            </router-link>
        </el-col>
        <el-col :span="2" class="text-align-end">
            <router-link to="/login">
                <el-button type="primary" round>登录</el-button>
            </router-link>
        </el-col>
    </el-row>
</template>

<style scoped lang="css">
a{
    text-decoration: none;
}
.nav-topic{
    font-size: 24px;
    font-weight: bold;
    font-style: oblique;
    color: rgb(83, 151, 218);
}
.nav-left {
    font-size: 20px;
    font-weight: bold;
    color: #999;
}

.nav-right {
    font-size: 18px;
    color: #555;
    font-weight: 500;
}

.el-link:hover {
    border-bottom: 3px solid rgb(66, 152, 222);
    color: #333;
}

.el-link .el-icon--right.el-icon {
    vertical-align: text-bottom;
}

.text-align-center {
    text-align: center;
}

.text-align-end {
    text-align: end;
}

</style>
